<!DOCTYPE html>
<html>

<body>
    <!-- 创建表格 -->
    <p>每个表格以table标签开始</p>
    <p>每个表格行由tr标签开始</p>
    <p>每个表格数据由td标签开始</p>
    <h4>一列：</h4>
    <table border="1">
        <tr>
            <td>100</td>
        </tr>
    </table>

    <h4>一行三列:</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </table>

    <h4>两行三列：</h4>
    <table border="1">
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>

    <!-- 表头 -->
    <h4>表头示例：</h4>
    <table border="1">
        <tr>
            <th>Heading</th>
            <th>Another Heading</th>
        </tr>
        <tr>
            <td>row1, cell1</td>
            <td>row1, cell2</td>
        </tr>
        <tr>
            <td>row2, cell1</td>
            <td>row2, cell2</td>
        </tr>
    </table>

    <!-- 空单元格 -->
    <h4>为了防止空单元格的边框不显示，在空单元格内加一个空格占位符：</h4>
    <table border="1">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>

    <!-- 带有标题的表格 -->
    <h4>带有标题的表格</h4>
    <table border="1">
        <caption>我的标题</caption>
        <tr>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <td>400</td>
            <td>500</td>
            <td>600</td>
        </tr>
    </table>

    <h4>跨行或跨列的单元格</h4>
    <p>横跨两列的单元格</p>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>
    <p>横跨两行的单元格</p>
    <table border="1">
        <tr>
            <th>name</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

    <h4>表格内的标签：</h4>
    <table border="1">
        <tr>
            <td>
                <p>这是一个段落。</p>
                <p>这是另一个段落。</p>
            </td>
            <td>这个单元包含一个表格：
                <table border="1">
                    <tr>
                        <td>A</td>
                        <td>B</td>
                    </tr>
                    <tr>
                        <td>C</td>
                        <td>D</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <!-- 无序列表使用<ul>，有序列表则为<ol> -->
            <td>这个单元包含一个列表：
                <ul>
                    <li>苹果</li>
                    <li>香蕉</li>
                    <li>菠萝</li>
                </ul>
            </td>
            <td>HELLO</td>
        </tr>
    </table>

    <!-- 单元格边距 -->
    <h4>没有 cellpadding：</h4>
    <table border="1">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>
    <h4>带有 cellpadding：</h4>
    <table border="1" cellpadding="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>        
    </table>

    <!-- 单元格间距 -->
    <h4>带有 cellspacing：</h4>
    <table border="1" cellspacing="10">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <!-- 背景颜色和背景图像对table的操作同样适用于单元格 -->
    <h4>背景颜色：</h4>
    <table border="1" bgcolor="red">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>
    <h4>背景图像：</h4>
    <table  border="1" background="/home/bqh/图片/gakki.jpg">
        <tr>
            <td>First</td>
            <td>Row</td>
        </tr>
        <tr>
            <td>Second</td>
            <td>Row</td>
        </tr>
    </table>

    <!-- 单元格中排列内容 -->
    <h4>排列内容：</h4>
    <table width="400" border="1">
        <tr>
            <th align="left">消费项目....</th>
            <th align="right">一月</th>
            <th align="right">二月</th>
        </tr>
        <tr>
            <td align="left">衣服</td>
            <td align="right">$241.10</td>
            <td align="right">$50.20</td>
        </tr>
        <tr>
            <td align="left">化妆品</td>
            <td align="right">$30.00</td>
            <td align="right">$44.45</td>
        </tr>
        <tr>
            <td align="left">食物</td>
            <td align="right">$730.40</td>
            <td align="right">$650.00</td>
        </tr>
        <tr>
            <th align="left">总计</th>
            <th align="right">$1001.50</th>
            <th align="right">$744.65</th>
        </tr>
    </table>

    <!-- 框架(frame)属性 -->
    <p><b>注释：</b>frame 属性无法在 Internet Explorer 中正确地显示。</p>
    ​
    <p>Table with frame="box":</p>
    <table frame="box">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
    ​
    <p>Table with frame="above":</p>
    <table frame="above">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
    ​
    <p>Table with frame="below":</p>
    <table frame="below">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
    ​
    <p>Table with frame="hsides":</p>
    <table frame="hsides">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
    ​
    <p>Table with frame="vsides":</p>
    <table frame="vsides">
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
    </table>
</body>

</html>